<template>
<el-container class="largebox">
  <!-- 头部区域 -->
  <el-header>
  <el-menu
  
  class="el-menu-demo"
  mode="horizontal"
   router
 
  background-color="#545c64"
  text-color="#fff"
  active-text-color="#ffd04b">
  <div class="headerbox2">
    <img src="../assets/logo.png" width="40px" height="35px"/>
  </div>
  <el-menu-item class="headerbox"  @click="dialogVisible = true">个人信息</el-menu-item>
 
  <el-submenu class="headerbox" index="2">
    <template slot="title">我的工作台</template>
    <el-menu-item index="/addarticle">发布文章</el-menu-item>
    <el-menu-item @click="addvisible=true">我要出售</el-menu-item>
    <el-menu-item index="/mycar">
      <el-badge :value="this.valuenum11" class="item" type="danger">
       我的购物车
</el-badge>
    </el-menu-item>
   
  </el-submenu>
   <el-menu-item class="headerbox" @click="logout()">退出登录</el-menu-item>
</el-menu>

  </el-header>
   <!-- 弹出的修改信息对话框 -->
    <el-dialog
  title="信息修改"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">

  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog> 
<!-- 出售商品弹出框 -->
        <el-dialog
      title="我要出售"
      :visible.sync="addvisible"
      width="50%"
      @close="addclosed"
    >
      <el-form
        :model="addForm"
        :rules="addFormrules"
        ref="addFormRef"
        label-width="80px"
      >
      <!-- 头像上传 -->
      <el-upload
  class="avatar-uploader"
  action="/app/login/uploadimg"
  :show-file-list="true"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload"
  
 >
  <img v-if="imageUrl"  :src="imageUrl" class="avatar" >
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
        <el-form-item label="商品名称" prop="name">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" prop="price">
          <el-input v-model="addForm.price"></el-input>
        </el-form-item>
      
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addvisible = false">取 消</el-button>
        <el-button type="primary" @click="addGoods">确 定</el-button>
      </span>
    </el-dialog>
  <el-container>
    <!-- 侧边栏 -->
    <el-aside width="200px">
      <!-- 列表 -->
 <el-col >
  
    <el-menu
      default-active="1"
    
     
      background-color="#545c64"
      text-color="#fff"
      router
      active-text-color="#ffd04b">
      <el-menu-item index="/users">
        <i class="el-icon-user"></i>
        <span slot="title">用户列表</span>
      </el-menu-item>
      <el-menu-item index="/shopping">
        <i class="el-icon-shopping-bag-2"></i>
        <span slot="title">购物商城</span>
      </el-menu-item>
          <el-menu-item index="/article">
        <i class="el-icon-setting"></i>
        <span slot="title">博客列表</span>
      </el-menu-item>
          <el-menu-item :index="changeindex()">
        <i class="el-icon-service"></i>
        <span slot="title">云音乐</span>
      </el-menu-item>
    </el-menu>
  </el-col>
    </el-aside>
    <!-- 主要内容展示 -->
    <el-main>
        <router-view></router-view>
    </el-main>
  </el-container>
</el-container>


</template>

<script>
export default {
  
  data () {
    return {
     dialogVisible:false,
     addvisible:false,
     valuenum11:"",
      addForm:{
        
        name: "",
        price: "",
        
        img:"",

        },
         addFormrules: {
        name: [
          // 第一个，必须输入用户名，在blur的时候触发
          { required: true, message: "请输入商品名称", trigger: "blur" },
        
        ],
        price: [
          { required: true, message: "请输入商品牌价格", trigger: "blur" },
        
        ],
     
      },
      imageUrl:''
    }
  },
  created(){
    this.getcarnum();
  },
  methods:{
     handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      logout(){
        window.sessionStorage.clear();
        this.$router.push('/login')
      },
    
addclosed(){
  this.$refs.addFormRef.resetFields();
},
      
      // 文件上传成功
 handleAvatarSuccess(res, file) {
      // console.log(res);
      // console.log(file);
       this.imageUrl = URL.createObjectURL(file.raw);
      this.addForm.img=res.imgUrl;
       //  console.log( this.addForm.img)
      },
      // 文件上传要求
beforeAvatarUpload(file){
 const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }

        return isJPG && isLt2M;
      },
      addGoods(){
          this.$refs.addFormRef.validate( (valid) => {
      if (!valid) return;
      this.$axios.post("/app/login/addgoods",{
        name:this.addForm.name,
        price:this.addForm.price,
        img:this.addForm.img
      }).then((res)=>{
        console.log(res);
        if(res.data.status==220){
           this.$message.success("添加成功");
          this.$router.go(0);
        }else{
            this.$message.error("添加失败");
        }
          this.addvisible = false;
        
        
      })
    })
      },
      getcarnum(){
        this.$axios.get("/app/login/getcar",{
          params:{
            iduser:window.sessionStorage.getItem('token')
          }
        }).then((res)=>{
          // console.log(res);
         this.valuenum11=res.data.result.length;
        })
      },
      changeindex(){
       
        if(window.sessionStorage.getItem('userinfo')===null) return '/music';
        else return '/musichome';
      }
  }
}
</script>
<style scoped>
  
 .el-header, .el-footer {
    background-color: #545c64;
    color: #333;
    
    line-height: 60px;
  }
  
  .el-aside {
    background-color: #545c64;
  
    text-align: center;
    line-height: 100px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }

.largebox{
     margin-top: -60px;
 height: 100%;
}

.el-col-12{
width: 100%;
}
.headerbox{
  display: flex;
}
.imgbox{
flex: 3;
text-align: start;
}
.imgbox2{
  flex: 9;
  /* background-color: #333; */
  text-align: end;
}
.imgbox3{
  flex: 2;
}
.headerbox{
 float: right;
}
.headerbox2{
  float: left;
 padding-left: 80px;
}
.avatar-uploader {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 100px;
    height: 100px;
    margin-bottom: 20px;
  }
  .avatar-uploader:hover {
    border-color: #409EFF;
  }
   .avatar{
   width: 100px;
   height: 100px;
 }
 .el-icon-plus{
   position: absolute;
  top:45px;
  left: 45px;
  
 }
</style>
